<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>作业</title>
  </head>
  <body>
    你爱好的运动是
    <input type="checkbox" />全选/全不选（全选自动勾选）<br />
    <input type="checkbox" value="a" />足球
    <input type="checkbox" value="a" />篮球
    <input type="checkbox" value="a" />羽毛球
    <input type="checkbox" value="a" />乒乓球<br />
    <button class="all">全选</button>
    <button class="no">全不选</button>
    <button class="reverse">反选</button>
    <button class="print">提交并打印</button><br />
    <ul>
      <li class="bj">北京</li>
      <li>上海</li>
      <li>四川</li>
      <li>深圳</li>
    </ul>
    <button class="add">创建一个广州节点</button><br />
    <button class="insert">将广州节点插入到北京前面</button><br />
    <button class="replace">使用广州节点替换北京节点</button><br />
    <button class="remove">删除广州节点</button><br />
    <button class="read">读取当前城市列表结构</button><br />
    <button class="child">读取北京内的节点</button>
    <script>
      let box = document.querySelectorAll("input[value=a]");
      let all = document.querySelector(".all");
      let no = document.querySelector(".no");
      let reverse = document.querySelector(".reverse");
      let print = document.querySelector(".print");
      all.onclick = function () {
        box.forEach(function (v) {
          if (v.checked == false) {
            v.checked = true;
          }
        });
      };
      no.onclick = function () {
        box.forEach(function (v) {
          if (v.checked == true) {
            v.checked = false;
          }
        });
      };
      reverse.onclick = function () {
        box.forEach(function (v) {
          v.checked = !v.checked;
        });
      };
      print.onclick = function () {
        box.forEach(function (v) {
          if (v.checked == true) {
            console.log(v.nextSibling);
          }
        });
      };
      ////////////////////////////////////////////////////////////////////////
      let add = document.querySelector(".add");
      let insert = document.querySelector(".insert");
      let replace = document.querySelector(".replace");
      let remove = document.querySelector(".remove");
      let read = document.querySelector(".read");
      let child = document.querySelector(".child");
      let ul = document.querySelector("ul"),
        li;
      let bj = document.querySelector(".bj");
      add.onclick = function () {
        li = document.createElement("li");
        li.append("广州");
      };
      insert.onclick = function () {
        ul.insertBefore(li, ul.firstChild);
      };
      replace.onclick = function () {
        ul.replaceChild(li, bj);
      };
      remove.onclick = function () {
        ul.removeChild(li);
      };
      read.onclick = function () {
        console.log(ul);
      };
      child.onclick = function () {
        console.log(ul.children[0].childNodes);
      };
    </script>
  </body>
</html>
